import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '@/views/Layout'

// 默认会去寻找 index.vue
import Login from '@/views/Login'
// import Login from '@/views/Login/index.vue'
import NotFound from '@/views/NotFound'
import { getUser } from '@/store'

Vue.use(VueRouter)

const routes = [
  // 登陆之后跳转到的页面是不是就是应用整体发生交互行为的页面
  //这个页面是不是可以看作默认页
  // 路径是不是可以写成/ 
  {
    path: '/',
    name: 'Layout',
    component: Layout,
    redirect: { name: 'Home' },
    //文章管理/粉丝管理
    //凡是配置的文件，严格按照规范化写法 path驼峰 component name 首字母大写
    children: [
      { path: 'home', component: () => import(/* webpackChunkName: "home" */ '@/views/Home'), name: 'Home' },
      { path: 'articles', component: () => import(/* webpackChunkName: "article" */ '@/views/Article'), name: 'Articles' },
      { path: 'addArticle', component: () => import(/* webpackChunkName: "addArticle" */ '@/views/Article/articleAdd'), name: 'AddArticle' },
      { path: 'editArticle', component: () => import(/* webpackChunkName: "editArticle" */ '@/views/Article/articleEdit'), name: 'EditArticle' },
      { path: 'image', component: () => import(/* webpackChunkName: "image" */ '@/views/Image'), name: 'Image' },
      { path: 'comment', component: () => import(/* webpackChunkName: "comment" */ '@/views/Comment'), name: 'Comment' },
      { path: 'fans', component: () => import(/* webpackChunkName: "fans" */ '@/views/Fans'), name: 'Fans' },
      { path: 'settings', component: () => import(/* webpackChunkName: "settings" */ '@/views/Setting'), name: 'Setting' }
    ]
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    //当输入的路径不在当前的配置表里的时候  404优化体验上的路由页  跟业务无关  提升用户体验的
    path: '*',
    component: NotFound
  }
]

const router = new VueRouter({
  routes
})

//to代表跳转的目标路由对象
//from  来源于哪个路由对象
//next 可执行的方法  用来控制实际的路由跳转  必须要调用！！！如果不调用 路由永远跳转不过去
router.beforeEach((to, from, next) => {
  console.log(to, from, next)
  //如果当前跳转到主页  需要控制权限
  if (to.path === '/home') {
    //需要控制权限
    //控制权限实际上判断的依据是什么 有无成功登录操作 本地token是否有效 （当前阶段做不到token失效判断）
    let user = getUser()//如果有是个对象结构  如果没有是个null
    if (user && user.token) {
      //当前的状态是登录状态
      next()
    } else {
      //当前的状态是非登录状态 跳转到登录页
      next('/login')
    }
  } else {
    //跳转到登录页不需要控制权限
    next()
  }
})

/**
 * 当前的判断逻辑是基于用户正常访问判断下的逻辑 
 * 如果用户就是能猜到除了登录页和默认页之外其他的的登录地址  那我们就要和后端打配合做容错  具体做法如下：
 * 业务组件中都有接口调用  在没有token的状态下调用接口时拿到的是401状态码（这个状态码前端是否可以拿到取决于后端是否支持）
 * 当可以拿到401状态码的时候  前端做判断  如果status===401 强制跳回到登录页
 * 由于不可能在每一个业务组件中都写一遍跳回登录逻辑  所以采用 axios response 全局劫持
 */
export default router
